<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template>
            <a-col :xxl="7" :xl="8" :lg="12" :md="14" :sm="24" :xs="24" sytle="min-width:200px">
              <a-form-item label="时间范围">
                <a-range-picker
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['开始', '结束']"
                    @change="dateTimeRangeChange"
                    style="width: 100%"
                    v-model="pikcerData"
                />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="7" :lg="12" :md="10" :sm="8" :xs="24" >
              <a-form-item label="用户账号">
                <a-input placeholder="请输入用户账号查询" v-model="queryParam.loginName"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xxl="3" :xl="4" :lg="8" :md="8" :sm="8" :xs="24" >
              <a-form-item label="操作类型">
<!--                <a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>-->
                <a-select @change="actionChange" v-model="tempActionType">
<!--                  操作标识(add,delete,update,query)   操作对象，设备或其他实体(device,camera,user,record) -->
                  <a-select-option value="add">新增</a-select-option>
                  <a-select-option value="update">编辑</a-select-option>
                  <a-select-option value="delete">删除</a-select-option>
                  <a-select-option value="query">查询</a-select-option>
                  <a-select-option value="alarm">异常</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>

          <a-col  :xxl="3" :xl="5" :lg="8" :md="8" :sm="8" :xs="24" >
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
      <a-button @click="batchDel" type="primary" icon="delete" :disabled="selectedRowKeys.length === 0">批量删除</a-button>

      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" bordered size="middle" rowKey="logId" :columns="columns" :dataSource="dataSource"
               :pagination="ipagination" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
          </div>
        </template>

        <!--				<span slot="loginNumber" slot-scope="text, record">-->
        <!--					<a @click="showTable(record)">在线 {{record.loginNumber}}</a>-->
        <!--					&lt;!&ndash; <a @click="handleEdit(record)">编辑</a> &ndash;&gt;-->
        <!--				</span>-->

        <span slot="action" slot-scope="text, record">
					<a @click="handleDelete(record.logId)">删除</a>
				</span>

      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: "OperationLog",
  mixins: [JeecgListMixin],
  data() {
    return {
      description: '这是操作日志页面',
      tempActionType:"",
      pikcerData:[],
      queryParam: {
        startTime: "",
        endTime: "",
        loginName: "",
        actionType: ""
      },
      recycleBinVisible: false,
      columns: [
        {
          title: '用户账号',
          align: "center",
          dataIndex: 'loginName',
        },
        {
          title: '操作时间',
          align: "center",
          dataIndex: 'createTime',
        },
        {
          title: '动作',
          align: "center",
          dataIndex: 'actionType',
          width: 80,
          customRender: function(text) {
            if (text == "add") {
              return "新增"
            } else if (text == "update") {
              return "编辑"
            } else if (text == "delete") {
              return "删除"
            } else if (text == "query") {
              return "查询"
            } else if (text == "alarm") {
              return "异常"
            }
          }
        },
        {
          title: '内容',
          align: "center",
          dataIndex: 'info'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          },
          align: "center",
        }

      ],
      url: {
        list: "/log/action/page",
        delete: "/log/action/delete",
        deleteBatch: "/log/action/delete-batch"
      },
    }
  },
  computed: {
  },
  methods: {
    resetParam() {
      this.queryParam = {
        startTime: "",
        endTime: "",
        loginName: "",
        actionType: ""
      };
      this.tempActionType = "";
      this.pikcerData = [];
      this.loadData(1)
    },
    actionChange(value, option) {
      this.queryParam.actionType = value;
    },
    dateTimeRangeChange(dates, dateStrings) {
      this.queryParam.startTime = dateStrings[0]
      this.queryParam.endTime = dateStrings[1];
    },
  }

}
</script>
<style scoped>

</style>
